function updataImg(){
    $("#image_box_show").html('');
    $("#image_box_show").append('<div><img src="./images/loading.gif" class="show_upload_img"></div>');
    var form = new FormData(document.getElementById("form"));
    $.ajax({
        url: "http://10.10.23.163:8080/face/attr/detectByFile",
        type: "post",
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        async: true,
        success: function (data) {
            if(data.errorCode){
                //alert(data.errorMessage);
                window.parent.system_tips(data.errorMessage);
                return;
            }else {
                $("#url_input").val("");
                setData(data);
            }
        },
        error: function (e) {
            console.log("上传错误...");
            window.parent.system_tips("上传错误...");
        }
    });
}
function getShowImgList(){
    $.get('http://10.10.23.163:8080/face/attr/lists', {},function(data) {
        console.log(data);
        if(data.success == false){
            //alert(data.msg)
            window.parent.system_tips(data.msg);
        }else {
            var _defaultimg = '';
            if(data.length>0){
                var sum_li = '';
                _defaultimg = data[0].imgId;
                var _len = data.length;
                for (var i=0;i<_len;i++) {
                    var item = data[i];
                    var _class = i==0?" active":"";
                    var _li = '<li class="flex '+_class+'" data-id="'+item.imgId+'">'+
                                '<img src="'+item.faceImagePath+'" class="show_upload_img"/>'+
                              '</li>';
                    sum_li+=_li;
                }
                $("#show_img_list").html("");
                $("#show_img_list").append(sum_li);
                $("#scroller").css("width",(_len*165+15)+'px');
                myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: false, mouseWheel: true });
            }
            checkImgByImgid(_defaultimg);
        }
    },"json");
}
function faceCheckByurl(){
    var params = {};
    params.imagePath = $("#url_input").val();
    $.post('http://10.10.23.163:8080/face/attr/detectByUrl', params, function (data) {
        console.log(data);
        setData(data);
    });
}
function setData(data){
    var src = data.bigImagePath;
    var json = data.result;
    var msg = JSON.stringify(json, null, 4);
    var img = '<div><img src="'+src+'" class="show_upload_img"></div>';
    $("#image_box_show").html("");
    $("#image_box_show").append(img);
    $("#detail_message_box").html("");
    $("#detail_message_box").append('<textarea readonly="readonly" class="textarea">'+msg+'</textarea>');
    // 设置face 列表
    setFaceList(data.result);
    $("#take_time").html(data.times+'ms');
    $("#take_number").html(data.result.length);
}
function checkImgByImgid(imgid){
    var params = {};
    params.imgId = imgid;
    $.post('http://10.10.23.163:8080/face/attr/detectByImgId', params, function (data) {
        console.log(data);
        setData(data);
    });
}
// 设置face 列表
function setFaceList(data){
    var sum_li = '';
    if(data!=null){
        var _len = data.length;
        window.faceDataList = data;
        for (var i=0;i<_len;i++) {
            var item = data[i];
            var _class = i==0?" active":"";
            var _li = '<li class="flex '+_class+'" data-index="'+i+'">'+
                        '<img src="'+item.faceUrl+'" class="show_upload_img" />'+
                      '</li>';
            sum_li+=_li;
        }
        $("#show_face_list").html("");
        $("#show_face_list").append(sum_li);
        $("#scroller_1").css("width",(_len*92+2)+'px');
        myScroll = new IScroll('#wrapper_1', { scrollX: true, scrollY: false, mouseWheel: true });
        showFaceDetailbyindex(0);
    }
    
}
function showFaceDetailbyindex(face_index){
    var faceDataList  = window.faceDataList;
    var detail_face = faceDataList[face_index];
    console.log(detail_face);
    var sum_tr = '';
    for(var o in detail_face){ 
        if(o!='faceUrl'){
            var tr = '<div class="table_tr">'+
                        '<div class="table_td">'+o+'</div>'+
                        '<div class="table_td">'+detail_face[o]+'</div>'+
                    '</div>';
            sum_tr+= tr; 
        }
    }
    $("#table_box").html("");
    $("#table_box").append(sum_tr);
}
function keyAttributeClick(){
    $("#key_attribute").find(".msg_text").toggleClass('active');
    $("#detail_message").toggleClass('noactive');
    $("#detail_message .msg_text").removeClass('active');
    $("#key_attribute_box").toggleClass('hide');
    $("#detail_message_box").addClass('hide');
    myScroll = new IScroll('#wrapper_1', { scrollX: true, scrollY: false, mouseWheel: true });
}
$(function(){
    // 加载所有的即将要识别的图片
    getShowImgList();
    keyAttributeClick();
    $("#key_attribute").click(function(){
        keyAttributeClick();
    });
    $("#detail_message").click(function(){
        $(this).find(".msg_text").toggleClass('active');
        $(this).removeClass('noactive');
        $("#key_attribute .msg_text").removeClass('active');
        $("#detail_message_box").toggleClass('hide');
        $("#key_attribute_box").addClass('hide');
    });
    $("#url_submit").click(function(){
        $("#image_box_show").html("");  
        $("#image_box_show").append('<div><img src="images/loading.gif" class="show_upload_img"></div>');
        faceCheckByurl();
    });
    $("#show_img_list").on('click','li',function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        $("#image_box_show").html("");
        $("#image_box_show").append('<div><img src="images/loading.gif" class="show_upload_img"></div>');
        var img_id = $(this).attr('data-id');
        checkImgByImgid(img_id);
        // keepCurPosition('scroller');
    });
    $("#show_face_list").on('click','li',function(e){
        e.stopPropagation();
        e.preventDefault();
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        var face_index = $(this).attr('data-index');
        showFaceDetailbyindex(face_index);
        // keepCurPosition('scroller_1');
    });
    
});